// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Row, Col} from 'antd';

// 组件引入
import {TextLink} from './components/TextLink';
import {TextLinkList} from './components/TextLinkList';

// 样式引入
import styles from './style.module.less';

@observer
class Footer extends Component {
  render() {
    return (
      <footer
        className={classNames(styles.footer, this.props.className)}
        style={this.props.style}>
        <div className="container">
          <Row type="flex" gutter={16}>
            <Col className={styles.col} xs={24} md={8}>
              <h4 className={styles.title}>关于BootCDN</h4>
              <p className="paragraph">BootCDN 是 <TextLink to="/" value="Bootstrap 中文网" />支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。</p>
              <p className="paragraph">自2013年10月31日上线以来已经为30多万家网站提供了稳定、可靠的免费 CDN 加速服务。</p>
              <p className="paragraph">反馈或建议请发送邮件至：cdn@bootcss.com</p>
            </Col>
            <Col className={styles.col} xs={24} md={8}>
              <h4 className={styles.title}>友情链接</h4>
              <TextLinkList data={this.props.friendshipLinks} />
            </Col>
            <Col className={styles.col} xs={24} md={8}>
              <h4 className={styles.title}>我们用到的技术</h4>
              <TextLinkList data={this.props.technologyUsed} />
            </Col>
          </Row>
        </div>
        <div className={styles.copyright}>
          <div className="container">
            © 2013-2018 <TextLink to="/" value="京ICP备11008151号" /> 京公网安备11010802014853
          </div>
        </div>
      </footer>
    );
  }
}

Footer.defaultProps = {
  friendshipLinks: [
    { 
      id: '1',
      to: '/',
      value: 'Bootstrap中文网'
    },
    { 
      id: '2',
      to: '/',
      value: 'Ghost中文网'
    },
    { 
      id: '3',
      to: '/',
      value: 'Laravel中文网'
    },
    { 
      id: '4',
      to: '/',
      value: 'jQuery中文文档'
    },
    { 
      id: '5',
      to: '/',
      value: 'Webpack中文网'
    },
    { 
      id: '6',
      to: '/',
      value: 'NPM中文网'
    },
    { 
      id: '7',
      to: '/',
      value: '全栈课堂'
    },
    { 
      id: '8',
      to: '/',
      value: '91PHP'
    },
    { 
      id: '9',
      to: '/',
      value: 'Node.js中文文档'
    }
  ],
  technologyUsed: [
    { 
      id: '1',
      to: '/',
      value: 'Bootstrap'
    },
    { 
      id: '2',
      to: '/',
      value: 'Ghost'
    },
    { 
      id: '3',
      to: '/',
      value: 'jQuery'
    },
    { 
      id: '4',
      to: '/',
      value: 'Babeljs'
    },
    { 
      id: '5',
      to: '/',
      value: 'Lodash'
    },
    { 
      id: '6',
      to: '/',
      value: 'Node.js'
    },
    { 
      id: '7',
      to: '/',
      value: 'Grunt'
    },
    { 
      id: '8',
      to: '/',
      value: 'Gulp'
    },
    { 
      id: '9',
      to: '/',
      value: 'NPM'
    },
    { 
      id: '10',
      to: '/',
      value: 'webpack'
    },
    { 
      id: '11',
      to: '/',
      value: 'Rollup'
    },
    { 
      id: '12',
      to: '/',
      value: 'Parcel'
    },
    { 
      id: '13',
      to: '/',
      value: 'PostCSS'
    }
  ]
};

const InjectFooter = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(Footer);

export {Footer, InjectFooter};